<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model="keyword"
      />&nbsp;<button @click="handleSearch">Search</button>
    </div>
  </section>
</template>

<script>
export default {
  name: "searchUsers",

   // 定义组件的数据属性
  data() {
    // 初始化搜索关键字为空字符串
    return {
      keyword: "",
    };
  },
    methods: {
    /**
     * 处理搜索操作。
     * 当关键字存在时，触发全局搜索事件。
     * 
     * 通过$bus广播"search"事件，携带关键字参数，供其他组件监听并执行相应的搜索操作。
     * 这种通信方式适用于父子组件间或兄弟组件间通信，尤其在不直接存在父子关系时。
     */
    handleSearch() {
      // 如果关键字不存在，则不执行搜索操作
      if (!this.keyword) return;
      // 触发搜索事件，传递关键字
      this.$bus.$emit("search", this.keyword);
    },
  },
};
</script>

<style></style>
